<div th:fragment="html">
    <div class="page_container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/main}">快递系统管理</a></li>
                <li class="breadcrumb-item"><a th:href="@{/main}">快递站</a></li>
                <li class="breadcrumb-item active">员工管理</li>
            </ol>
        </nav>
        <div class="staff_search">
            <div class="form-row align-items-center">
                <div class="col-sm-3 my-1">
                    <input type="text" class="form-control" id="staff_id" placeholder="请输入需要搜索的员工姓名" v-model.trim="name"/>
                </div>
                <div class="col-auto my-1">
                    <a class="form-check-label" href="#">高级</a>
                </div>
                <div class="col-auto my-1">
                    <button class="btn btn-sm btn-info" @click="search">搜索</button>
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-sm-1 my-1">
                    <select class="custom-select" id="staff_sex" v-model.trim="gender">
                        <option selected value="">性别</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </div>
                <div class="col-sm-1 my-1">
                    <select class="custom-select" id="staff_job" v-model.trim="position">
                        <option selected value="">职位</option>
                        <option value="快递员">快递员</option>
                        <option value="财务">财务</option>
                        <option value="内勤">内勤</option>
                    </select>
                </div>
                <div class="col-sm-1 my-1">
                    <select class="custom-select" id="staff_grade" v-model.trim="level">
                        <option selected value="">级别</option>
                        <option value="特级">特级</option>
                        <option value="高级">高级</option>
                        <option value="中级">中级</option>
                        <option value="低级">低级</option>
                        <option value="在职">在职</option>
                        <option value="申请中">申请中</option>
                    </select>
                </div>
                <div class="col-sm-1 my-1">
                    <input type="number" class="form-control" id="staff_min_money" placeholder="最低工资" v-model.trim="min_salary"/>
                </div>
                <div class="col-sm-1 my-1">
                    <input type="number" class="form-control" id="staff_max_money" placeholder="最高工资" v-model.trim="max_salary"/>
                </div>
                <div class="col-sm-1 my-1">
                    <select class="custom-select" id="staff_place" v-model.trim="area">
                        <option selected value="">分配区域</option>
                        <template v-for="bean in areas">
                            <option v-if="bean.areaName!='未分配区域'" v-bind:value="bean.areaName">{{bean.areaName}}</option>
                        </template>
                    </select>
                </div>
            </div>
        </div>
        <div class="staff_information">
            <table class="table">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">员工ID</th>
                    <th scope="col">姓名</th>
                    <th scope="col">性别</th>
                    <th scope="col">职位</th>
                    <th scope="col">级别</th>
                    <th scope="col">工资</th>
                    <th scope="col">分配区域</th>
                    <th scope="col">手机号</th>
                    <th scope="col">升降职</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="bean in show_beans">
                    <tr>
                        <td>{{bean.sid}}</td>
                        <td>{{bean.name}}</td>
                        <td>{{bean.gender==1?"男":"女"}}</td>
                        <td>{{bean.baseInfo.position}}</td>
                        <td>{{bean.baseInfo.level}}</td>
                        <td>{{bean.baseInfo.salary}}</td>
                        <td>{{bean.area.areaName=='未分配区域'?'':bean.area.areaName}}</td>
                        <td>{{bean.phone}}</td>
                        <td><a href="#" data-toggle="modal" data-target="#staffChangeModal" @click="changeStaff(bean)">升降职</a></td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
        <div th:include="include/public/pagination.html"></div>
        <div class="modal fade" id="staffChangeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">升降职</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <dl>
                            <dt>职位</dt>
                            <dd>
                                <select class="custom-select" id="change_staff_job" v-model.trim="user.baseInfo.position">
                                    <option value="快递员">快递员</option>
                                    <option value="财务">财务</option>
                                    <option value="内勤">内勤</option>
                                </select>
                            </dd>
                            <dt>级别</dt>
                            <dd>
                                <select class="custom-select" id="change_staff_grade" v-model.trim="user.baseInfo.level">
                                    <option v-if="Math.floor(user.bid/100)==1" value="特级">特级</option>
                                    <option v-if="Math.floor(user.bid/100)==1" value="高级">高级</option>
                                    <option v-if="Math.floor(user.bid/100)==1" value="中级">中级</option>
                                    <option v-if="Math.floor(user.bid/100)==1" value="低级">低级</option>
                                    <option v-else value="在职">在职</option>
                                    <option value="申请中">申请中</option>
                                </select>
                            </dd>
                            <dt v-if="Math.floor(user.bid/100)==1">分配区域</dt>
                            <dd v-if="Math.floor(user.bid/100)==1">
                                <select class="custom-select" id="change_staff_place" v-model.trim="user.aid">
                                    <option selected value="">分配区域</option>
                                    <template v-for="bean in areas">
                                        <option v-if="bean.areaName!='未分配区域'" v-bind:value="bean.aid">{{bean.areaName}}</option>
                                    </template>
                                </select>
                            </dd>
                        </dl>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" @click="deleteStaff">开除</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="updateStaff">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>